<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        文章分类： <input type="text" v-model="searchConditions.category">
        <span>{{searchConditions.category}}</span>

        发布状态： <input type="text" v-model="searchConditions.state">
        <span>{{searchConditions.state}}</span>

        <button>搜索</button>
        <button @click="clear">重置</button>

        <br />
        <br />
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>

    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        createApp({
            data() {
                return {
                    searchConditions: {
                        category: '',
                        state: ''
                    },
                    articleList: [
                        {
                            title: '标题1',
                            category: '时事',
                            time: '2023-09-05',
                            state: '已发布'
                        },
                        {
                            title: '标题2',
                            category: '时事2',
                            time: '2023-09-06',
                            state: '已发布'
                        },
                        {
                            title: '标题3',
                            category: '时事3',
                            time: '2023-09-07',
                            state: '已发布'
                        }
                    ]
                }
            },
            methods: {
                clear() {
                    this.searchConditions.category = ''
                    this.searchConditions.state = ''
                }
            },
            mounted() {
                console.log('Vue挂载完成，发送请求获取数据')
            }
        }).mount('#app')
    </script>
</body>

</html>